<template>
  <div class="weui-panel-topup">
    <!-- <Weui-search-bar @search="search"></Weui-search-bar> -->
    <div class="weui-flex ">
      <div class="weui-flex__item">
          <p class="explanation">代充钻石记录</p>
      </div>
     
    </div>
     <div class="weui-flex">
      <div class="weui-cells date-form" @click="playSound">
        <input type="text" id='from-time' placeholder="开始日期" data-toggle='date' v-model="fromTime"/>
        <input type="text" id='to-time'  placeholder="结束日期" data-toggle='date' v-model="toTime"/>
        <button class="weui-btn weui-btn_primary" @click="queryTopupRecord">搜索</button>
      </div>
      </div>
     <div class="weui-flex wrap record-content" v-if="tableData.length > 0">
        <table class="topup-table">
          <thead>
            <tr>
              <th>收钻人ID</th>
              <th>充值数量</th>
              <th>充后对方数量</th>
              <th>充后自己数量</th>
              <th>充值时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(el, i) of tableData" :key="i">
              <td class="getId">{{el.slftid}}</td>
              <td class="topup-amount">{{el.amount}}</td>
              <td class="getId">{{el.sAmount}}</td>
              <td class="getId">{{el.pAmount}}</td>
              <td class="getId">{{el.date}}<br/>{{el.time}}</td>
            </tr>
          </tbody>
        </table>
        <div class="pagination">
          <button class="weui-btn weui-btn_default weui-btn_mini" @click="prev">上一页</button>
          <span>{{pagination.page}} / {{pagination.pageCount}} </span>
          <button class="weui-btn weui-btn_default weui-btn_mini" @click="next">下一页</button>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'Vuex'

export default {
  data() {
    return {
      mAmount: 0,
      mePlayer: {
        headUrl: '',
        nickname:'',
        amount: 0
      },
      limit: 10,
      offset: 0,
      pagination: {
        page: 1,
        pageCount: 1
      },
      fromTime: [],
      toTime:[],
      tableData: []
    } 
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user'])
  },
  mounted() {
    let userinfo = JSON.parse(localStorage.getItem('userinfo')).userinfo;

    this.mePlayer = userinfo;
    this.mAmount = userinfo.gameAmount;

    $('#from-time').calendar();
    $('#to-time').calendar();

    $('#from-time').val(this.getToday())
    $('#to-time').val(this.getToday())

    console.error(userinfo)
    this.queryTopupRecord();
  },
  methods: {
    playSound() {
      window.btn_sound.play();
    },
    getToday() {
      let d = new Date()
      let day = d.getDate() > 9 ? (d.getDate()): `0${(d.getDate())}`;
      let mon = (d.getMonth() + 1) > 9 ? (d.getMonth() + 1): `0${(d.getMonth() + 1)}`;
      let yea = d.getFullYear();
      return `${yea}-${mon}-${day}`

    },
    next() {
      if(this.pagination.page > 1) {
        this.pagination.page --
        this.offset = (this.pagination.page - 1) * this.limit
        this.queryTopupRecord(717)
      }
      window.btn_sound.play();
    },
    prev() {
      if(this.pagination.page < this.pagination.pageCount) {
        this.pagination.page ++
        this.offset = (this.pagination.page - 1) * this.limit
        this.queryTopupRecord(717)
      }
      window.btn_sound.play();
    },
        // 查询代充玩家ID
    queryTopupRecord(type) {
      if(type !== 717) {
        this.pagination = {
          page: 1,
          pageCount: 1
        }
      }
      let fromTime = new Date($('#from-time').val() + ' 00:00:00').getTime();
      let toTime = new Date($('#to-time').val() + ' 23:59:59').getTime();

      if(navigator.appVersion.match(/iPhone/ig)) {
        fromTime = new Date($('#from-time').val().replace(/-/g, '/') + ' 00:00:00').getTime();
        toTime = new Date($('#to-time').val().replace(/-/g, '/') + ' 23:59:59').getTime();
      }

      this.fromTime = [$('#from-time').val()]
      this.toTime = [$('#to-time').val()]

      if(Number.isNaN(fromTime) || Number.isNaN(toTime)) {
        return alert('请选择查询日期!')
      }

      if(toTime < fromTime) {
        return alert('结束日期不能大于开始日期!')
      }

      const send = {
        limit: this.limit,
        offset: this.offset,
        fromTime,
        toTime,
      }

      console.log(send)
      this.api.homePage.queryTopupRecord(send).then(res => res.json()).then(data => {
        console.log('queryTopupRecord', data)
        let source = data.source;
        if (data.errorCode === 0) {
          source.forEach(item => {
            let s = item.createTime.split(/T/g)
            item.date = s[0]
            item.time = s[1].split(/\./)[0]
          })
          this.tableData = source;
          this.pagination.pageCount = data.totalRow
              ? Math.ceil(data.totalRow / this.limit)
              : 1;

        } else {
          $.alert(data.message, function() {
            window.btn_sound.play();
          });          
        }
      })
    },
    back2main() {
      window.btn_sound.play();
      this.$router.push('/')
    }
  }
}

</script>

<style lang="less" scoped>
.weui-flex__item{
  background: #f5f5f5;
}
.weui-panel-topup {
  height: 100%;
  width: 100%;
  background: transparent;
}
.weui-flex {
  height: 100%;
  align-items: center;
  justify-content: center;
}
.explanation {
  font-size: 1.1rem;
  text-align: center;
  padding: 1rem 0;
  width: 100%;
  margin-bottom: 0.2rem;
  background-color: #fff;
}

.tip-content {
    padding: 2px 10px;
  }
.weui-cell:before { 
  border-color: transparent;
}
 .flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 .flex-1 {
  flex-basis: 30%;
  margin: 8px!important;
 }
 .flex-12 {
 flex-basis: 46%;
  margin: 0!important;
  input {
    margin: 0;
    width: 80%;
  }
 }
  .flex-123 {
 flex-basis: 24%;
  margin: 0!important;

 }
 .bold-font {
  font-size: 1rem;
  font-weight: bold;
 }
 .space-around {
  justify-content: space-around;
 }
 .flex-33 {
  flex-basis: 33.33%;
 }
 .btn-confirm{
  display: flex;
  justify-content: flex-end;
  button {
    width: 36%;
    margin: 0;
  }
 }

 .nowrap {
  flex-wrap: nowrap;
 }

 .topup-table {
  border-spacing: 0;
  width: 100%;
  th {
    font-weight: normal;
    border: solid 1px #ededed;
    border-right-color: transparent;
    background-color: #f8f8f8;
    font-size: 0.7rem;
  }

  .topup-amount {
    color: #f44336;
  }
 }

 .date-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  input {
    width: 40%;
    flex-basis: 40%;
    margin: 2px 4px;
    height: 1.6rem;
    border-radius: 4px;
  }
  button {
   width: 20%;
    flex-basis: 20%; 
    height: 1.6rem;
    line-height: 1.6rem;
    vertical-align: middle;
  }
 }
 .pagination {
  width: 100%;
  flex-basis: 100%;
 }

 .wrap {
  flex-wrap: wrap;
 }
 .record-content {
  margin-top: 0.8rem;
 }
</style>